<template>
  <div class="feature-com">
    <title-com :title="title"></title-com>
    <ul class="list row justify-content-between">
      <li  class="col col-4  col-sm-4 col-md-6 col-lg-4" v-for="(item,index) in list">
        <div class="col-wrap">
          <div class="icon" @click="go(item)">
              <img :src="getUrl(item.img)" alt="">
          </div>
          <h1 class="d-sm-block d-md-none d-lg-none">{{item.departmentShortName}}</h1>
          <h1 class="d-none d-sm-none d-md-block d-lg-block">{{item.departmentName}}</h1>
          <hr class="d-none d-sm-none d-md-block d-lg-block">
          <p class="d-none d-sm-none d-md-block d-lg-block">{{item.departmentDescription}}</p>
        </div>
       </li>
     </ul>
  </div>
</template>

<script>
  import titleCom from "./titleCom"
  export default {
    props:['title', 'list'],
    computed: {},
    data() {
      return {

      }
    },
    components: {
      titleCom
    },
    mounted() {

    },
    methods: {
      go(department) {
        this.$router.push({path:'/zhuanke/' + department.id + '/jieshao' })
      },
    }
  }
</script>

<style lang="less" scoped>
  @import "~assets/style/public";

.feature-com{
  margin-top: 50/@size;
  .list{

    li{
      margin-top: 100/@size;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .col-wrap{
        position: relative;
        border: 1px solid @theme-color;
        .padding(75,25,27,25);
        .icon{
          cursor: pointer;
          background: @theme-color;
          width: 100/@size;
          height: 100/@size;
          position: absolute;
          top: -25%;
          left: 50%;
          transform: translateX(-50%);
          border-radius: 50%;
          img{
            .width(79);
            .height(41);
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            position: absolute;
          }
        }
        h1{
          font-family: MicrosoftYaHeiUI-Bold;
          font-size: @font-18;
          color: #222222;
          letter-spacing: 0;
          text-align: center;
        }
        hr{
          height: 2/@size;
          background:  #979797;
          .width(50);
          margin: 10/@size auto;
        }
        p{
          font-family: MicrosoftYaHeiUI;
          font-size: 16/@size;
          color: #666666;
          letter-spacing: 0;
          text-align: center;
          line-height: 32/@size;
        }
      }

    }
  }
}
  @media (min-width:320px) and (max-width: 767px) {
    .feature-com{
      .list{
        margin: 0;
        li{
          .col-wrap{
            .icon{
              cursor: pointer;
              width: 80/@size;
              height: 80/@size;
            }
            h1{
              font-size: @font-28;
              text-align: center;
              font-family: @font-first;
            }
          }
        }
      }
    }
  }

</style>
